<template>
  <div>
    <h3>当前的count值为{{ this.$store.state.mode.count }}</h3>
    <h3>当前的count值为{{ this.$Mode.state.count }}</h3>

    <h3>当前的count值为{{ count }}</h3>
    <button @click="btnHandler1">+1</button>
    <button @click="btnHandler2">+n</button>
    <button @click="addAsyncl1">+1 Async</button>
    <button @click="addNAsyncl1(5)">+N Async</button>


   
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      msg: 'No Welcome to Youe Vue.js App'
    };
  },
  computed: {
    ...mapState({
      count: (state) => state.mode.count,
    }),
  },
  methods:{
    btnHandler1(){
      this.$store.commit('add1') // commit调用某个mutation函数，无论是否夸组件
    },
    btnHandler2(){
      this.$store.commit('addN1',101)
    },
    ...mapActions(['addAsyncl1','addNAsyncl1'])
    

  }
};
</script>

<style>
</style>